<template>
	<div class="skeleton-view">
		<div v-for="(item,index) in 5" class="sk-co-view">
			<div class="concern-Padd global-display global-a-items">
				<div class="sk-img skeleton-global"></div>
				<div class="concern-nackname sk-co-nickname">
					<p class="skeleton-global"></p>
					<p class="skeleton-global"></p>
				</div>
			</div>
			<div class="card-view-b">
				<div v-for="item in 5" class="skeleton-global"></div>
			</div>
			<div class="sk-co-address skeleton-global"></div>
			<div class="sk-co-title skeleton-global"></div>
			<div class="sk-co-content skeleton-global"></div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
.sk-img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.sk-co-nickname p:nth-child(1){
	width: 50px;
	height: 10px;
	border-radius: 3px !important;
}
.sk-co-nickname p:nth-child(2){
	width: 40px;
	height: 10px;
	border-radius: 3px !important;
	margin-top: 5px;
}
.concern-Padd{
	margin: 10px 0;
}
.concern-nackname{
	padding-left: 10px;
}
.card-view-b{
	display: grid;
	grid-template-rows: repeat(2, 1fr); /* 设置两行，每行占据 1/2 */
	grid-template-columns: 40% calc(30% - 3px) calc(30% - 3px); /* 设置三列，第一列占据 40%，后面两列每列占据 30%（包括间距） */
	grid-gap: 3px; /* 设置元素之间的间距 */
}
/* 设置第一列的第一个子元素占据两行 */
.card-view-b div:first-child {
	grid-row: 1 / span 2;
	grid-column: 1;
	height: calc(2 * 100px + 3px);
}
.card-view-b div{
	height: 100px;
	overflow: hidden;
	border-radius: 3px !important;
}
.sk-co-address{
	width: 70px;
	height: 20px;
	margin: 4px 0;
	border-radius: 3px !important;
}
.sk-co-title{
	width: 100px;
	height: 20px;
	margin: 4px 0;
	border-radius: 3px !important;
}
.sk-co-content{
	width: 100%;
	height: 30px;
	border-radius: 3px !important;
}
</style>